<template>
  <div class="login">
    <div class="login_box">
      <!-- 头像区域 -->
      <div class="avatar_box">
        <img
          src="../../assets/logo.png"
          alt=""
        >
      </div>
      <el-tabs
        v-model="activeName"
        type="border-card"
        class="login_tabs"
      >
        <el-tab-pane
          label="用户名登录"
          name="username"
          class="login_username"
        >
          <!-- 用户名登录表单区域 -->
          <el-form
            ref="loginFormRef"
            :model="loginForm"
            :rules="loginFormRules"
            label-width="80px"
            class="login_form"
            :label-position="labelPosition"
            status-icon
          >
            <!-- 用户名 -->
            <el-form-item
              prop="username"
              label="用户名："
            >
              <el-input
                v-model="loginForm.username"
                prefix-icon="el-icon-user"
                style="width:80%"
              ></el-input>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item
              prop="password"
              label="密码："
            >
              <el-input
                v-model="loginForm.password"
                prefix-icon="el-icon-s-unfold"
                type="password"
                show-password
                style="width:80%"
              ></el-input>
            </el-form-item>
            <!-- 验证码 -->
            <el-form-item
              prop="code"
              label="验证码："
              style="margin-bottom:0"
            >
              <el-input
                v-model="loginForm.code"
                prefix-icon="el-icon-s-comment"
                style="width:80%"
              ></el-input>
              <img
                class="captchaImg"
                src="http://localhost:8899/user/captcha"
                alt="验证码"
                @click="getCaptcha"
              >
            </el-form-item>
            <p style="font-size:10px;margin-bottom:20px">注：管理员请通过用户名密码登录，顾客请通过邮箱登录</p>
            <!-- 按钮区域 -->
            <el-form-item class="btns">
              <el-button
                type="primary"
                style="margin:0 40px 0 20px"
                @click="nameLogin"
              >登录</el-button>
              <el-button
                type="info"
                @click="reset"
              >重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane
          label="邮箱登录"
          name="mail"
        >
          <!-- 邮箱登录表单区域 -->
          <el-form
            ref="mailLoginFormRef"
            :model="mailLoginForm"
            :rules="mailLoginFormRules"
            label-width="80px"
            class="mailLogin_form"
            :label-position="labelPosition"
            status-icon
          >
            <!-- 邮箱 -->
            <el-form-item
              prop="mail"
              label="邮箱："
            >
              <el-input
                v-model="mailLoginForm.mail"
                prefix-icon="el-icon-chat-line-square"
                style="width:80%"
              ></el-input>
              <button
                class="get_verification"
                @click="getCode"
                :class="{right_phone: rightPhone}"
                :disabled="!rightPhone"
              >
                {{computeTime > 0 ? `已发送${computeTime}s`  : '获取验证码'}}
              </button>
            </el-form-item>
            <!-- 邮箱验证码 -->
            <el-form-item
              prop="mailCode"
              label="验证码："
              style="margin-bottom:0"
            >
              <el-input
                v-model="mailLoginForm.mailCode"
                prefix-icon="el-icon-s-comment"
                style="width:80%"
              ></el-input>
            </el-form-item>
            <p style="font-size:10px;margin-bottom:20px">注：管理员请通过用户名密码登录，顾客请通过邮箱登录</p>
            <!-- 按钮区域 -->
            <el-form-item class="btns">
              <el-button
                type="primary"
                style="margin:0 40px 0 20px"
                @click="mailLogin"
                class='mailbtn'
              >登录</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import interfaceList from '../../utils/interface'
export default {
    name:'login',
    data() {
      return {
        // 这是登录表单的数据绑定对象
        loginForm: {
          username: '',
          password: '',
          code:''
        },
        mailLoginForm:{
          mail:'',
          mailCode:''
        },
        activeName: 'username',
        labelPosition: 'right',
        // 这是表单的验证规则对象
        loginFormRules: {
          // 验证用户名是否合法
          username: [
            { required: true, message: '请输入登录名称', trigger: 'blur' },
            { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
          ],
          code:[
            { required: true, message: '请输入验证码', trigger: 'blur' },
          ],
          // 验证密码是否合法
          password: [
            { required: true, message: '请输入登录密码', trigger: 'blur' },
            // { min: 6, max: 6, message: '长度在 6 个字符', trigger: 'blur' }
          ]
        },
        mailLoginFormRules:{
          mail:[
            { required: true, message: '请输入邮箱', trigger: 'blur' },
          ],
          mailCode:[
            { required: true, message: '请输入验证码', trigger: 'blur' },
          ]
        },
        computeTime:0,
        mailLoginStatus:false
      }
  },
  methods:{
    nameLogin(){
      // console.log(this.loginForm)
      // this.getCaptcha()
      if(this.loginForm.username === '' || this.loginForm.password === '' || this.loginForm.code === ''){
          this.$message({
            message: '请输入用户信息',
            type: 'warning'
          })
          return 
      }
      interfaceList.login({
        username:this.loginForm.username,
        password:this.loginForm.password,
        captcha:this.loginForm.code
      }).then(res=>{
        console.log(res)
        if(res.code === 200) {
          this.$store.commit('loginSucess',this.loginForm.username)
          sessionStorage.setItem('loginStatus', true)
          sessionStorage.setItem('loginName', this.loginForm.username)
          this.$router.push({
            path:'/home'
          })
        }else if(res.code === -1){
          this.$message.error('登录失败，请检查用户名或密码是否正确')
        }else{
          this.$message({
            message: '验证码错误',
            type: 'warning'
          })
        }
      })
    },
    getCaptcha(e){
      // console.log(e)
      // 每次指定的src值必须不一样
      e.target.src = 'http://localhost:8899/user/captcha?time=' + Date.now()
    },
    reset(){
      this.loginForm.username = ''
      this.loginForm.password = ''
      this.loginForm.code = ''
    },
    getCode(){
      if(!this.computeTime){
        // 倒计时
        this.computeTime = 60
        const timeId = setInterval(()=>{
          this.computeTime --
          if(this.computeTime <= 0){
            clearInterval(timeId)
          }
        },1000)
        // 获取验证码
        interfaceList.getMailCode({
          mail:this.mailLoginForm.mail
        }).then(res => {
          console.log(res)
          if(res.code === 200){
            this.mailLoginStatus = true
          }else{
            this.$message.error('验证码发送失败')
          }
        })
      }
    },
    mailLogin(){
      if(this.mailLoginStatus === true){
        // console.log(this.mailLoginForm.mailCode)
        interfaceList.mailLogin({
          mailCode:this.mailLoginForm.mailCode
        }).then(res => {
          // console.log(res)
          if(res.code === 200){
            this.mailLoginStatus = false
            // console.log(this.mailLoginForm.mail)
            let headerStr = this.mailLoginForm.mail.slice(0,3)
            let footerStr = this.mailLoginForm.mail.slice(8,10)
            // console.log(`${headerStr}*****${footerStr}`)
            this.$store.commit('loginSucess',`${headerStr}*****${footerStr}`)
            sessionStorage.setItem('loginStatus', true)
            sessionStorage.setItem('loginName', `${headerStr}*****${footerStr}`)
            this.$router.push({
              path:'/home'
            })
          }else if(res.code === -1){
            this.$message.error('登录失败，请检查邮箱或密码是否正确')
          }
        })
      }else{
        this.$message.error('验证码发送失败,请检查邮箱是否正确')
      }
    }
  },
  computed: {
    rightPhone () {
      return /^[1-9]\d{7,10}@qq\.com$/.test(this.mailLoginForm.mail)
    }
  },
}
</script>


<style lang="scss" scoped>
.login_box {
  width: 450px;
  height: 330px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .avatar_box {
    height: 130px;
    width: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #ddd;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #eee;
    }
  }
}

.login_tabs {
  width: 100%;
  height: 100%;
  margin-top: 75px;
}
#tab-uasername {
  width: 50%;
}

.login_form {
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
</style>

<style>
#tab-username {
  width: 224px;
}
#tab-mail {
  width: 224px;
}
.captchaImg {
  position: absolute;
  bottom: 1px;
  left: 100px;
}
.mailbtn {
  width: 220px;
}
.get_verification {
  position: absolute;
  top: 50%;
  right: 80px;
  transform: translateY(-50%);
  border: 0;
  color: #ccc;
  font-size: 14px;
  background: transparent;
  cursor: pointer;
  outline: none;
}
.right_phone {
  color: black;
}
</style>
<style>
body,
html,
#app {
  width: 100%;
  height: 100%;
}

.login {
  width: 100%;
  height: 100%;
  background: url("../../assets/dengluLogin.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
}
</style>